<template>
  <div class="home-view">
    <!-- 上传区域 -->
    <UploadSection @file-upload="handleUpload" />

    <!-- 上传进度条 -->
    <el-progress
        v-if="uploadProgress > 0"
        :percentage="uploadProgress"
        :stroke-width="16"
        :text-inside="true"
        status="success"
        class="upload-progress"
    />

    <!-- 上传后操作区 -->
    <div v-if="isUploaded" class="post-upload">
      <el-button type="primary" @click="handlePreview">预览简历</el-button>
      <el-button type="success" @click="startAnalysis">智能分析</el-button>
    </div>

    <!-- 分析进度条 -->
    <el-progress
        v-if="analysisProgress > 0"
        :percentage="analysisProgress"
        :stroke-width="16"
        :text-inside="true"
        status="warning"
        class="analysis-progress"
    />

    <!-- 预览模态框 -->
    <el-dialog v-model="previewVisible" title="简历预览" width="70%">
      <iframe :src="previewUrl" class="preview-iframe"></iframe>
    </el-dialog>

    <!-- 价值主张卡片 -->
    <div class="value-propositions">
      <CardContainer
          v-for="(item, index) in propositions"
          :key="index"
          :icon="item.icon"
          :title="item.title"
          highlight
          clickable
      >
        {{ item.description }}
      </CardContainer>
    </div>

    <ProcessSteps />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { MagicStick, Opportunity, DocumentCopy } from '@element-plus/icons-vue'
import UploadSection from '@/components/UploadSection.vue'
import ProcessSteps from '@/components/ProcessSteps.vue'
import CardContainer from '@/components/CardContainer.vue'

const propositions = ref([
  {
    icon: MagicStick,
    title: 'AI深度解析',
    description: '智能识别30+简历评估维度'
  },
  {
    icon: Opportunity,
    title: '实时优化建议',
    description: '2000万+岗位大数据库支持'
  },
  {
    icon: DocumentCopy,
    title: '一键生成',
    description: '专业级ATS友好格式输出'
  }

]) // 保持原有数据

const uploadProgress = ref(0)
const isUploaded = ref(false)
const analysisProgress = ref(0)
const previewVisible = ref(false)
const previewUrl = ref('')
const fileData = ref(null)

const handleUpload = async (file) => {
  try {
    const formData = new FormData()
    formData.append('resume', file)

    const response = await axios.post('/api/upload', formData, {
      onUploadProgress: progressEvent => {
        uploadProgress.value = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
        )
      }
    })

    if (response.data.success) {
      isUploaded.value = true
      fileData.value = response.data
      ElMessage.success('上传成功！')
    }
  } catch (error) {
    ElMessage.error('上传失败：' + error.message)
  }
}

const handlePreview = () => {
  previewUrl.value = URL.createObjectURL(fileData.value)
  previewVisible.value = true
}

const startAnalysis = async () => {
  try {
    const response = await axios.post('/api/analyze', {
      fileId: fileData.value.id
    }, {
      onDownloadProgress: progressEvent => {
        analysisProgress.value = Math.min(
            95, // 保持进度在95%等待最终完成
            Math.round((progressEvent.loaded * 100) / progressEvent.total)
        ) // <-- Add closing parenthesis here
      }
    })

    analysisProgress.value = 100
    // 处理分析结果
    ElMessage.success('分析完成！')
    // 跳转到报告页面或显示结果组件
  } catch (error) {
    ElMessage.error('分析失败：' + error.message)
  }
}

</script>

<style lang="scss" scoped>
.home-view {
  .upload-progress,
  .analysis-progress {
    margin: 2rem auto;
    max-width: 600px;
  }

  .post-upload {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 2rem 0;
  }

  .preview-iframe {
    width: 100%;
    height: 70vh;
    border: none;
  }

  .value-propositions {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 4rem 0 2rem 0;
    justify-content: center;
    align-content: center;
  }
}
</style>